<template>
	<div class="">
		<div class="flex text-t-3">
			<n-grid :cols="12" layout-shift-disabled>
				<n-gi :span="item.span" v-for="item in cols" :key="item.prop">
					<div class="p-2" :class="item.align ? 'text-right' : ''">
						{{ $t(item.textT) }}
					</div>
				</n-gi>
			</n-grid>
		</div>
		<div>
			<transition
				v-for="(item, index) in list"
				:key="index"
				enter-active-class="animate__animated animate__fadeIn"
				leave-active-class="animate__animated animate__fadeOut">
				<list-item
					:type="type"
					:class="index % 2 ? '' : 'bg-bg-3 rounded-sm'"
					:data="item"
					:cols="cols" />
			</transition>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { NGrid, NGi } from 'naive-ui'
import ListItem from './list-item.vue'

defineProps({
	list: {
		type: Array as any,
		default: () => []
	},
	type: {
		type: String,
		default: 'slot'
	},
	cols: {
		type: Array as any,
		default: () => []
	}
})
</script>
